"use client";

import React from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Avatar } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";

interface Member {
  id: number;
  name: string;
  role: string;
  avatar: string;
  bio: string;
  skills: string[];
}

const members: Member[] = [
  {
    id: 1,
    name: "Alex Johnson",
    role: "Frontend Developer",
    avatar: "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=300",
    bio: "Experienced frontend developer with expertise in React and Next.js",
    skills: ["React", "TypeScript", "Tailwind CSS"]
  },
  {
    id: 2,
    name: "Sarah Williams",
    role: "UX Designer",
    avatar: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=300",
    bio: "Creative UX designer focused on creating intuitive user experiences",
    skills: ["Figma", "UI Design", "User Research"]
  },
  {
    id: 3,
    name: "Michael Chen",
    role: "Backend Developer",
    avatar: "https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=300",
    bio: "Backend specialist with strong knowledge of database optimization",
    skills: ["Node.js", "PostgreSQL", "API Design"]
  },
  {
    id: 4,
    name: "Emily Rodriguez",
    role: "Project Manager",
    avatar: "https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=300",
    bio: "Certified project manager with 5+ years of experience in agile methodologies",
    skills: ["Agile", "Scrum", "Team Leadership"]
  }
];

export default function MembersPage() {
  return (
    <div className="container mx-auto py-10">
      <h1 className="text-3xl font-bold mb-8">Our Team Members</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {members.map((member) => (
          <Card key={member.id} className="overflow-hidden hover:shadow-lg transition-shadow">
            <CardHeader className="pb-2">
              <div className="flex items-center gap-4">
                <Avatar className="h-12 w-12">
                  <img 
                    src={member.avatar} 
                    alt={member.name} 
                    className="object-cover"
                  />
                </Avatar>
                <div>
                  <CardTitle className="text-xl">{member.name}</CardTitle>
                  <CardDescription>{member.role}</CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">{member.bio}</p>
              <div className="flex flex-wrap gap-2">
                {member.skills.map((skill) => (
                  <Badge key={skill} variant="secondary">{skill}</Badge>
                ))}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}